<template>
	<view class="body">
		<view class="sphoto">
			<!-- top -->
			<view class="uptop">
				<view class="upimg">
					<image src="@/static/uploadimg.png" mode=""></image>
				</view>
			</view>
			<view class="selectphoto" @click="update">
				点击选择照片
			</view>
		</view>
		<!-- 规范说明 -->
		<view class="standard">
			<view class="face">
				<view class="fuzzylateral">
					<image src="../../static/photograph/Fuzzyface.png" mode=""></image>
				</view>
				<view class="fuzzylateral">
					<image src="../../static/photograph/Lateralface.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="text">
			<view style="margin-bottom: 5rpx;">
				为了给您带来最佳体验
			</view>
			<view>
				请您上传正面高清的照片
			</view>
		</view>
	</view>
	
	<!-- <view class="mask" v-show="isShow">
		<div class="loader"></div>
		<p style="margin-top: 80%;  font-family: Arial, sans-serif;color: #3498db;font-size: 28rpx; font-weight: 700;">
			加载中...</p>
	</view> -->
  <!-- #ifdef H5 -->
  	<view class="mask" v-show="isShow">
  		<div class="loader"></div>
  		<p style="margin-top: 100%;  font-family: Arial, sans-serif;color: #3cb4ff;font-size: 28rpx; font-weight: 700;">
  			加载中...</p >
  	</view>
  	<!-- #endif -->
  
  	<!-- #ifdef MP -->
  	<view class="mask" v-show="isShow">
  		<div class="loader"></div>
  		<p style="margin-top: 90%;  font-family: Arial, sans-serif;color: #3cb4ff;font-size: 28rpx; font-weight: 700;">
  			加载中...</p >
  	</view>
  	<!-- #endif -->


</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		updateImgApi
	} from '/api/photograph.js'
	import getImgUrl from '@/config/img.js'
	const multipart = ref('')
	const picUrl = ref([])
	const isShow = ref(false) //是否加载
	// 相册
	const update = () => {
		// isShow.value=true
		uni.chooseImage({
			count: 1,
			sourceType: ['album'], //从相册选择
			success: function(res) {
				const uploadFilePath = res.tempFilePaths[0]
				// 图片上传
				uploadFile(uploadFilePath)
			},
			fail(err) {
				console.error('文件选择失败:', err)
			}
		})
	}
	// 文件上传
	const uploadFile = (filePath) => {
		isShow.value = true
		uni.uploadFile({
			url: getImgUrl('api/front/ai-phg/step1Prune'),
			filePath: filePath,
			name: 'multipart',
			header: {
				'Authori-Zation': uni.getStorageSync('token')
			},
			success(res) {
				const resVal = JSON.parse(res.data)
				picUrl.value = resVal.data
				isShow.value = false
				// 跳转到详情
				uni.navigateTo({
					url: `/pages/avatarDetail/avatarDetail?pic=` + filePath + '&picUrl=' +
						encodeURIComponent(JSON.stringify(picUrl.value))
				})
			},
			fail(err) {
				console.log('上传失败', err);
			}
		})
	}
</script>

<style lang="scss" scoped>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100vh;
		text-align: center;
		background: rgba(0, 0, 0, 0.4);

		.loader {
			position: absolute;
			border: 8px solid #f3f3f3;
			border-top: 8px solid #3498db;
			border-radius: 50%;
			left: 40%;
			top: 30%;
			transform: translate(-50%, -50%);
			width: 70px;
			height: 70px;
			animation: spin 1s linear infinite;
			margin: 20px auto;
		}

		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}
	}

	.sphoto {
		display: flex;
		justify-content: center;
		margin-top: 6%;

		.uptop {
			width: 520rpx;
			height: 720rpx;
			border: 2rpx solid #C8C8C8;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: relative;

			.upimg {
				width: 200rpx;
				height: 200rpx;

				.image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.selectphoto {
			width: 300rpx;
			height: 80rpx;
			background-color: skyblue;
			position: absolute;
			top: 650rpx;
			left: 30%;
			border-radius: 50rpx;
			background: linear-gradient(to right, #9AE6FF, #CFF3FF, 60%, #8DF7F4);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
		}
	}

	.standard {
		.face {
			width: 460rpx;
			height: 200rpx;
			margin: 40rpx auto;
			display: flex;
			justify-content: space-between;

			.fuzzylateral {
				width: 200rpx;
				height: 200rpx;
			}
		}

	}

	.text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}
</style>